<template>
  <div class="app-container">
    <div class="breadcrumb-container">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>全部结果</el-breadcrumb-item>
        <el-breadcrumb-item>
          <el-tag type="info" v-if="breadcrumb.brand.value" @click="handleBreadcrumbClose('brand')">
            <span>{{ breadcrumb.brand.label }} : </span>
            <span style="color: red;"> {{ breadcrumb.brand.value }} </span>
            <i class="el-icon-close"></i>
          </el-tag>
          <el-tag type="info" v-if="breadcrumb.type.value" @click="handleBreadcrumbClose('type')">
            <span>{{ breadcrumb.type.label }} : </span>
            <span style="color: red;">{{ breadcrumb.type.value }} </span>
            <i class="el-icon-close" ></i>
          </el-tag>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-descriptions :column="1" border>
      <el-descriptions-item label="店铺">
        <template>
          <el-radio-group  v-model="queryParams.deptId" @change="getListMain">
            <el-radio v-for="shop in descList.shopOptions" :label="shop.deptId">{{shop.deptName}}</el-radio>
          </el-radio-group>
        </template>
      </el-descriptions-item>
      <el-descriptions-item v-if="!breadcrumb.brand.value" label="品牌">
        <template>
          <el-checkbox-group v-model="queryParams.brand" :max="1" @change="handleBrandChange">
            <el-checkbox v-for="brand in descList.brandOptions" :label="brand.brandId">{{brand.brandName}}</el-checkbox>
          </el-checkbox-group>
        </template>
      </el-descriptions-item>
      <el-descriptions-item v-if="!breadcrumb.type.value" label="类型">
        <template>
          <el-checkbox-group v-model="queryParams.type" :max="1" @change="handleTypeChange">
            <el-checkbox v-for="gtype in descList.typeOptions" :label="gtype.gTypeId">{{gtype.gTypeName}}</el-checkbox>
          </el-checkbox-group>
        </template>
      </el-descriptions-item>
      <el-descriptions-item label="高级选项"></el-descriptions-item>
    </el-descriptions>
    <div class="list-container">
      <template v-for="goods in goodsList">
        <item-card :goods="goods" @openItem="handleOpenItem" />
      </template>
    </div>
    <el-dialog :title="dialogInfo.title" :visible.sync="dialogInfo.open" width="1150px" append-to-body>
      <goods-item :gNumber="dialogInfo.gNumber" :dept-id="dialogInfo.deptId"></goods-item>
    </el-dialog>
  </div>
</template>

<script>
import { listAll, shopOptions } from "@/api/goods/shop";
import { optionSelect as brandOptionSelect } from "@/api/goods/brand";
import { optionSelect as typeOptionSelect } from "@/api/goods/type"
import GoodsItem from "./item.vue"

import ItemCard from "./itemCard"

export default {
  name: "GoodsList",
  components: { GoodsItem, ItemCard },
  data() {
    return {
      imgServe: process.env.VUE_APP_BASE_API,
      queryParams: {
        brand: [],
        type: [],
        deptId: undefined,
      },
      breadcrumb: {
        brand: { label: '品牌' },
        type: { label: '分类' },
        brandMap: {},
        typeMap: {},
      },
      descList: {
        shopOptions: [],
        brandOptions: [],
        typeOptions: []
      },
      goodsList: [],
      dialogInfo: {
        title: '商品详情',
        gNumber: null,
        deptId: -1,
        open: false,
      }
    }
  },
  created() {
    this.init();
  },
  methods: {
    async init() {
      await this.getOptions();
      this.getListMain();
    },
    generateImagePath(path) {
      if (path && path.indexOf('http') !== 0) {
        return this.imgServe + path
      } else {
        return path;
      }
    },
    async getOptions() {
      await shopOptions().then(res => {
        const data = res.data;
        this.descList.shopOptions = data;
        if (data) {
          this.queryParams.deptId = data[0].deptId;
        }
      })
      brandOptionSelect().then(res => {
        const data = res.data
        this.descList.brandOptions = data;
        this.breadcrumb.brandMap = {}
        for (let item of data) {
          this.breadcrumb.brandMap[item.brandId] = item.brandName
        }
      })
      typeOptionSelect().then(res => {
        const data = res.data
        this.descList.typeOptions = data;
        this.breadcrumb.typeMap = {}
        for (let item of data) {
          this.breadcrumb.typeMap[item.gTypeId] = item.gTypeName
        }
      })
    },
    getListMain() {
      let brandId = this.queryParams.brand ? this.queryParams.brand[0] : null
      let gtypeId = this.queryParams.type ? this.queryParams.type[0] : null
      let param = {
        brandId: brandId,
        typeId: gtypeId,
        deptId: this.queryParams.deptId,
      }
      listAll(param).then(res => {
        const list = res.data;
        list.filter(item => {
          this.genrateGoodsName(item);
        })
        this.goodsList = list;
      })
    },
    handleBrandChange(value) {
      if (value) {
        this.breadcrumb.brand.value = this.breadcrumb.brandMap[value[0]]
      } else {
        this.breadcrumb.brand.value = null
      }
      this.getListMain();
    },
    handleTypeChange(value) {
      if (value) {
        this.breadcrumb.type.value = this.breadcrumb.typeMap[value[0]]
      } else {
        this.breadcrumb.type.value = null
      }
      this.getListMain();
    },
    handleBreadcrumbClose(type) {
      this.breadcrumb[type].value = null
      this.queryParams[type] = []
      this.getListMain();
    },
    handleOpenItem(goods) {
      this.dialogInfo.gNumber = goods.gNumber
      this.dialogInfo.deptId = goods.deptId
      this.dialogInfo.open = true
    },
    genrateGoodsName(goods) {
      let name = goods.goodsName;
      const brandName = this.breadcrumb.brand.value;
      const typeName = this.breadcrumb.type.value;
      if (brandName) {
        const replaceName = '<em class="skcolor_ljg">' + brandName + '</em>';
        name = name.replace(brandName, replaceName);
      }
      if (typeName) {
        const replaceName = '<em class="skcolor_ljg">' + typeName + '</em>';
        name = name.replace(typeName, replaceName);
      }
      goods.viewname = name;
    },
  }
}
</script>
<style scoped>
.breadcrumb-container {
  height: 36px;
  .el-breadcrumb__item {
    line-height: 36px;
  }
  span.el-tag:not(:first-child) {
    margin-left: 10px;
  }
}

.list-container {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}
</style>
